<template>
  <el-form :model="unifyForm" ref="unifyForm" class="el-row" label-width="120px" :rules="rules">
    <el-form-item label="数据范围：" prop="unit" class=" el-col-24">
      <district-select @change="changeUnit" v-model="dataRange" />
    </el-form-item>
    <el-form-item label="任务名称：" prop="name" class=" el-col-24">
      <el-input v-model="unifyForm.name"></el-input>
    </el-form-item>
    <el-form-item label="用户名：" class=" el-col-24">
      <el-input disabled v-model="unifyForm.user"></el-input>
    </el-form-item>
    <el-form-item label="单位：" class=" el-col-24">
      <el-input disabled v-model="factory"></el-input>
    </el-form-item>
    <el-form-item label="导入数据：" prop="file" class="el-col-12">
      <el-upload action="" :before-upload="beforeUpload">
        <div v-if="file">
          <div>{{file.name}}</div>
        </div>
        <div v-else>
          <el-button type="primary">点击上传</el-button>
        </div>
      </el-upload>
    </el-form-item>
    <el-form-item label-width="0" class=" el-col-24">
      <div class="code-desc">
        <div>赋码规则:统一标准地址识别代码编码结构采用21位代码，包括6位国家标准行政区划代码、2位大类代码、2位中类代码、2位小类代码和9位顺序码</div>
        <img src="@/assets/images/codeAddress/rule.png" alt="">
      </div>

    </el-form-item>
    <el-form-item label-width="0" class="el-col-24" style="text-align: center;">
      <el-button type="primary" @click="handleClick">确定</el-button>
      <el-button type="error" @click="closeUnifyDialog"> 取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
import districtSelect from '../districtSelect.vue'

import { taskCreate } from '@/api/oneCodeAddress'

export default {
  data () {
    return {
      file: '',
      dataRange: [],
      unifyForm: {
        unit: '',
        user: '李建',
        name: '',
        source: '',
        type: '3',
        checkType: '统一编码赋码',
        file: ''
      },
      AInum: 90,
      rules: {
        unit: [{ required: true, message: '请选择数据范围' }],
        name: [{ required: true, message: '请输入任务名称' }],
        file: [{ required: true, message: '请选择要导入的数据' }]
      },
      factory: '省政务服务和数据管理局'
    }
  },
  methods: {
    beforeUpload (file) {
      this.file = file
      this.unifyForm.file = 1
      return false
    },
    changeUnit (value) {
      this.unifyForm.unit = value[value.length - 1]
    },
    closeUnifyDialog () {
      this.$emit('closeUnifyDialog')
    },
    handleClick () {
      this.$refs.unifyForm.validate(async valid => {
        if (valid) {
          const res = await taskCreate(this.unifyForm)
          if (res.status === 200) {
            this.$message.success('新增任务成功')
            this.$emit('closeUnifyDialog')
          } else {
            this.$message.error('新增任务失败！ 请检查')
          }
        }
      })

    }
  },
  components: {
    districtSelect
  }
}
</script>

<style lang="less">
.code-desc {
  font-size: 13px;
  text-indent: 2em;
  color: #696969;
  img {
    width: 980px;
  }
}
</style>